<template>
  <section class="batchConfig">
    <el-dialog
      id="configcar"
      v-dialogDrag
      title="批量配车"
      :visible.sync="popupsVisible"
      width="70%"
      center
      :append-to-body="true"
      :lock-scroll="true"
      :before-close="handleClose"
    >
      <dialogHeader
        slot="title"
        :title="'批量手工配车'"
        :style-type="$store.state.app.dialogType"
      />
      <el-row class="btns">
        <el-col :span="6" :offset="18">
          <el-button type="primary" @click="batchConfig">批量手工配车</el-button>
          <el-button class="iconfont icon-export" @click="tableExport">导出</el-button>
        </el-col>
      </el-row>
<!--      <mix-table-->
<!--        ref="mixTables"-->
<!--        :list-data="listData"-->
<!--        :table-height="350"-->
<!--        :highlight-current-row="true"-->
<!--        :dynamic-table-cols="tableCols"-->
<!--      />-->
      <el-row ref="vailComponentList4" :gutter="26">
        <el-table
          :data="listData"
          border
          style="width: 100%"
          max-height="300"
        >
          <el-table-column type="index" label="序号" align="center" />
          <el-table-column prop="saleOrderCode" label="DMS订单编号" width="150" align="center" />
          <el-table-column prop="remark" label="批量配车说明" width="120" align="center" />
          <el-table-column prop="OrderStatus" label="订单状态" align="center" />
          <el-table-column prop="custName" label="客户名称" align="center" />
          <el-table-column prop="custTEL" label="客户联系电话" align="center" />
          <el-table-column prop="salePlanCode" label="销售计划号" align="center" />
          <el-table-column prop="vin" label="VIN码" align="center" />
          <el-table-column prop="carConfigCN" label="车型配置" align="center" />
          <el-table-column prop="carColorName" label="车身颜色" align="center" />
          <el-table-column prop="carIncolorName" label="内饰颜色" align="center" />
          <el-table-column prop="optionalPagName" label="选装包" align="center" />
          <el-table-column prop="carHouseName" label="仓库名称" align="center" />
        </el-table>
      </el-row>
      <div
        slot="footer"
        class="dialog-footer"
      >
      </div>
    </el-dialog>
  </section>
</template>

<script>
import mixTable from '@/components/basicComponent/mixTable';
import { exportExcel } from '@/utils/exportExcel';

export default {
  name: 'BatchConfigCar',
  components: {
    // lableName: () => import('@/components/lableName'), // 标题溢出样式组件
    dialogHeader: () => import('@/components/dialogHeader'), // 弹窗标题,
    mixTable
  },
  props: {
    // 弹窗开关
    popupsVisible: { type: Boolean, default: false },
    // 传入的选中数据
    multipleData: { type: Array, default: () => ([]) }
  },
  data() {
    return {
      // // 表格数据
      listData: [],
      // 表格数据
      tableCols: [
        {
          codeField: 'saleOrderCode',
          label: 'DMS订单编号'
        },
        {
          codeField: 'remark',
          label: '批量配车说明'
        },
        {
          codeField: 'OrderStatus',
          label: '订单状态'
        },
        {
          codeField: 'custName',
          label: '客户名称'
        },
        {
          codeField: 'custTEL',
          label: '客户联系电话'
        },
        {
          codeField: 'salePlanCode',
          label: '销售计划号'
        },
        {
          codeField: 'vin',
          label: 'VIN码'
        },
        {
          codeField: 'carConfigCN',
          label: '车型配置'
        },
        {
          codeField: 'carColorName',
          label: '车身颜色'
        },
        {
          codeField: 'carIncolorName',
          label: '内饰颜色'
        },
        {
          codeField: 'optionalPagName',
          label: '选装包'
        },
        {
          codeField: 'carHouseName',
          label: '仓库名称'
        }
      ]
    }
  },
  watch: {
    'popupsVisible': {
      handler(val) {
        if (val) {
          // this.$set(this, 'listData', this.multipleData)
          this.multipleData.forEach(item => { this.listData.push(item) })
        }
      },
      immediate: true
    }
  },
  // updated() {
  //   console.log('zzz')
  // },
  methods: {
    handleClose() {
      this.$confirm('确认关闭窗口?', '提示')
        .then(() => {
          this.listData = []
          this.$emit('update:popups-visible', false)
        }).catch(_ => {})
    },

    // 批量配车按钮点击事件
    batchConfig() {

    },
    // 导出钮点击事件
    tableExport() {
      // exportExcel.call(this, '/fsdjj', '试驾车配车')

    }

  }
}
</script>

<style scoped lang="scss">
  .btns {
    margin-bottom: 10px;
  }
</style>
